<template>
	<view class="content">
		<view v-if="!judge" style="width: 100%;color: #999999; text-align: center;height: 200upx;line-height: 200upx;font-size: 30upx; margin-top: 100upx;">
			<text>该动态已被删除</text>
		</view>
		<view class="quans" v-if="judge">
			<view class="quan">
				<view class="top">
					<image :src="getRealPath(quan.imgUrl)" mode="" @tap="go_userinfo(quan.userId)"></image>
					<view class="vi">
						<text class="nickName" @tap="go_userinfo(quan.userId)">{{quan.nickName}}</text>
						<text class="time">{{formatTime(quan.createTime)}}</text>
					</view>
					<view v-if="quan.userId==user.id" class="delete" @tap="del">
						删除
					</view>
				</view>
				<view class="detail">
					<text>{{quan.quanDesc}}</text>
					<view class="img" v-if="quan.quanImgUrl.length!=0">
						<image class="dimage" @tap="prevImg(quan.quanImgUrl)" :src="getRealPath(quan.quanImgUrl)" alt="" mode="aspectFill"></image>
					</view>
					<view class="duotu" v-if="quan.images.length!=0">
						<image @tap="prevMoreImg(quan.images,i)" :src="getRealPath(it.imgUrl)" mode="aspectFill" v-for="(it,i) in quan.images"
						 :key="i"></image>
					</view>
				</view>
				<view :class="btn" @tap="star">
					<image :src="src" mode=""></image>
					<text>{{quan.stars}}</text>
				</view>
			</view>
		</view>
		<view v-if="judge" style="height: 20upx;width: 100%;background-color: #f4f4f4;"></view>
		<view v-if="judge" class="comments">
			<view class="neirong">
				<text>评论内容</text>
				<text style="color: #2E77ED;" @tap="reverse">反序</text>
			</view>
			<view v-if="comments.length==0" style="width: 100%;height: 90upx;line-height: 90upx;text-align: center;color: #dcdcdc;font-size: 22upx;">
				<text @tap="getComments(quan.id)">{{tips}}</text>
			</view>
			<view class="comment" v-for="(item,index) in comments" :key="index">
				<view class="top">
					<image :src="getRealPath(item.imgUrl)" mode="" @tap="go_userinfo(item.userId)"></image>
					<view class="vi">
						<text class="nickName" @tap="go_userinfo(item.userId)">{{item.nickName}}</text>
						<text class="time">第{{index+1}}楼 | {{formatTime(quan.createTime)}}</text>
					</view>
					<view v-if="item.userId==user.id" class="delete" @tap="delComments(index)">
						删除
					</view>
				</view>
				<view class="de" >
					<text>{{item.content}}</text>
				</view>
			</view>
		</view>
		<view class="inp" v-if="judge">
			<textarea value="" :show-confirm-bar="tab" fixed="true" v-model="content" placeholder="说说你的看法" auto-height	="true" maxlength="100" />
			<text @tap="send"  :class="isInput">发送</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import utils from "../../static/js/utils.js";
	export default {
		data() {
			return {
				tab:false,
				quan: {},
				src: '../../static/images/dianzan.png',
				btn: 'star',
				comments:[],
				content:'',
				tips:'偷偷告诉你，这还毛都没有'
			}
		},
		computed: {
			...mapState(['user']),
			judge() {
				if (JSON.stringify(this.quan) == "{}") {
					return false;
				}
				return true;
			},
			isInput(){
				return this.content.length==0?'dis':'active';
			}
		},
		methods: {
			delComments(index){
				let that = this;
				uni.showModal({
					title: '删除提醒',
					content: '确认删除此评论',
					showCancel: true,
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
								utils.post("quan/deletecomment",{
								id:that.comments[index].id,
								userId:that.user.id
							},function(data) {
								utils.successToast("删除成功");
								that.comments.splice(index,1);
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			reverse(){
				this.comments.reverse();
			},
			send(){
				if(this.content.length!=0) {
					utils.loading("发送中");
					let that = this;
					utils.post("quan/addcoment",{
						quanId:that.quan.id,
						userId:that.user.id,
						content:that.content
					},function(data) {
						utils.successToast("发送成功");
						data.nickName = that.user.nickName;
						data.imgUrl = that.user.imgUrl;
						that.comments.push(data);
						that.content='';
						
					})
				}
			},
			...mapMutations(['setQuanChange']),
			star() {
				if (this.src == '../../static/images/dianzan.png') {
					this.src = '../../static/images/zan.png';
					this.quan.stars++;
					this.btn = "star act";
					let quanId = this.quan.id;
					utils.post("quan/star", {
						quanId: quanId
					}, function(data) {
						
					})
				}

			},
			del() {
				let quanId = this.quan.id;
				let userId = this.user.id;
				let that = this;
				uni.showModal({
					title: '删除提醒',
					content: '确认删除此动态',
					showCancel: true,
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							utils.post("quan/delete", {
								userId: userId,
								quanId: quanId
							}, function(data) {
								that.setQuanChange({
									quanChange: true
								});
								utils.successToast("删除成功");
								uni.navigateBack({
									delta: 1
								});
							}, function() {

							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			formatTime(timestamp) {
				var da = new Date(timestamp);
				return da.getFullYear() + "-" + (da.getMonth() + 1) + "-" + da.getDate();
			},
			go_userinfo(userId) {
				uni.navigateTo({
					url: '../usercenter/userinfo?userId=' + userId
				});
			},
			prevMoreImg(images, index) {
				let imgs = [];
				images.forEach((item) => {
					imgs.push(utils.baseImgUrl + item.imgUrl);
				});
				uni.previewImage({
					urls: imgs,
					current: imgs[index]
				})
			},
			prevImg(imgUrl) {
				uni.previewImage({
					urls: [this.getRealPath(imgUrl)]
				})
			},
			getRealPath(path) {
				return utils.baseImgUrl + path;
			},
			getComments(quanId){
				utils.loading("加载中");
				this.tips='';
				let that = this;
				utils.get("quan/getcomment",{
					quanId:quanId
				},function(data){
					if(data.length==0){
						that.tips = '偷偷告诉你，这还毛都没有';
					}
					that.comments = data;
				},function(){
					utils.hideLoading();
				})
			}
		},
		onLoad(option) {
			let quanId = option.quanId;
			let that = this;
			utils.loading("加载中");
			utils.post("quan/detail", {
				quanId: quanId
			}, function(data) {
				that.quan = data;
			},function(){
				utils.hideLoading();
				that.quan={};
			});
			this.getComments(quanId);
		}
	}
</script>

<style>
	page {
		
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.quans {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.comments{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 150upx;
	}
	.comment {
		width: 100%;
		background-color: #ffffff;
		padding-top: 20upx;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		flex-direction: column;
		box-shadow: inset 0px -1px 1px -1px #dcdcdc;
	}
	.neirong{
		width: 92%;
		height: 80upx;
		font-size: 26upx;
		color: #000000;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.delete {
		width: 96upx;
		height: 50upx;
		background-color: #ffffff;
		color: #ed5a65;
		text-align: right;
		font-size: 22upx;
		border-radius: 10upx;
	}

	.quan {
		width: 100%;
		background-color: #ffffff;
		padding-top: 20upx;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		flex-direction: column;
	}

	.top {
		width: 92%;
		height: 90upx;
		display: flex;
		flex-direction: row;
		margin-top: 15upx;

	}

	.top image {
		height: 90upx;
		width: 90upx;
		border-radius: 60upx;
	}

	.top .vi {
		height: 90upx;
		margin-left: 20upx;
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.time {
		font-size: 24upx;
		color: #999999;
		margin-top: 8upx;
	}

	.detail {
		width: 90%;
		margin-top: 40upx;
	}
	.de{
		width: 80%;
		margin-left: 115upx;
		margin-top: 30upx;
		font-size: 32upx;
		margin-bottom: 40upx;
	}
	.detail text {
		font-size: 32upx;
	}

	.img {
		width: 98%;
		margin-top: 20upx;
	}

	.detail .dimage {
		width: 100%;
		border-radius: 6upx;
		height: 460upx;
	}

	.duotu {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.duotu image {
		width: 100%;
		height: 460upx;
		margin-top: 20upx;
	}

	.nickName {
		font-size: 32upx;
		margin-top: 6upx;
	}

	.star {
		width: 62%;
		height: 56upx;
		margin-top: 60upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 70upx;
		border: 1px solid #dcdcdc;
		margin-bottom: 40upx;
		color: #2C2C2C;

	}

	.act {
		border: 1px solid #2E77ED;
		color: #2E77ED;
	}

	.star image {
		height: 40upx;
		width: 40upx;
	}

	.star text {
	
		margin-left: 15upx;
		font-size: 30upx;
	}
	.inp {
		width: 100%;
		display: flex;
		flex-direction: row;
		position: fixed;
		min-height: 120upx;
		background-color: #ffffff;
		bottom: 0;
		box-shadow: inset 0px 1px 1px -1px #dcdcdc;
		align-items: center;
	}
	.inp textarea {
		margin-left: 4%;
		flex: 1;
		height: 80upx;
		font-size: 30upx;
		margin-right: 20upx;
	}
	.inp text {
		font-size: 30upx;
		margin-right: 4%;
	}
	.dis{
		color: #dcdcdc;
	}
	.active{
		color: #2E77ED;
	}
</style>
